<template>
  <div>
    <div class="table-container">
      <el-card class="operate-container" shadow="never">
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
        <el-button
          v-show="hasPermission('sys:permission:add')"
          size="mini"
          @click="handleAdd"
          class="btn-add">添加
        </el-button>
      </el-card>
      <el-table
        :data="list"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        v-loading="listLoading"
        :tree-props="{children: 'permissionList'}">
        <el-table-column align="center" label="id" prop="id"/>
        <el-table-column align="center" label="名称" prop="name"/>
        <el-table-column label="权限标识" prop="permission"/>
        <el-table-column align="center" label="类型" prop="type"/>
        <el-table-column align="center" label="添加时间" prop="addTime"/>
        <el-table-column align="center" label="修改时间" prop="updateTime"/>
        <el-table-column label="操作" width="280" align="center">
          <template slot-scope="scope">
            <el-button
              v-show="hasPermission('sys:permission:edit')"
              size="mini"
              @click="handleUpdate(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              v-show="hasPermission('sys:permission:deleted')"
              size="mini"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import {formatDate} from '@/utils/date';
  import {fetchList,deleteData} from '@/api/permission';
  import store from '@/store'
  export default {
    name: 'permission',
    components: {},
    data() {
      return {
        list:[],
        listLoading: true,
      }
    },
    created() {
      this.getList();
    },
    filters: {
      formatCreateTime(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      },
    },
    methods: {
      handleAdd() {
        this.$router.push({
          path: '/sys/permissionDetail'
        })
      },
      getList() {
        this.listLoading = true;
        fetchList(this.listQuery).then(response => {
          this.list = response.data;
          this.listLoading = false
        });
      },
      handleDelete(index, row) {
        this.$confirm('是否要进行该删除操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteData(row.id).then(response => {
            this.$message({
              message: '删除成功！',
              type: 'success',
              duration: 1000
            });
            this.getList();
          }).catch(reason => {

          });
        })
      },
      handleUpdate(index, row) {
        this.$router.push({
          path: '/sys/permissionDetail',
          query: {
            id: row.id
          }
        })
      },
      hasPermission(perms){
        return store.getters.roles.some(role => perms === role)
      }
    }
  }
</script>
<style>
  .avatar {
    width: 145px;
    height: 145px;
    display: block;
  }
  .input-width {
    width: 80%;
  }
</style>

